<template>
  <div>
    <el-tooltip placement="left" content="二维码">
      <el-button size="mini" type="primary" icon="el-icon-picture" @click="to" />
    </el-tooltip>
    <el-dialog
      title="二维码展示"
      center
      :visible.sync="DialogShowQRCode"
      append-to-body
      width="300px"
      height="300px"
      @close="closeCode"
    >
      <div class="qrcode">
        <div id="qrcode" ref="qrcode" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    supThis: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      DialogShowQRCode: false
    }
  },
  methods: {
    to() {
      var _dt = '序列号:' + this.data.serialno

      this.ShowQRCodeDialog(_dt)
    },
    ShowQRCodeDialog(_data) {
      // this.qrCode = row;
      this.DialogShowQRCode = true
      this.$nextTick(() => {
        document.getElementById('qrcode').innerHTML = ''
        this.ShowQRCode(_data)
      })
    },
    ShowQRCode(dt) {
      const qrcode = new QRCode(this.$refs.qrcode, {
        width: 150, // 图像宽度
        height: 150, // 图像高度
        colorDark: '#000000', // 前景色
        colorLight: '#ffffff', // 背景色
        typeNumber: 4,
        correctLevel: QRCode.CorrectLevel.H // 容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
      })
      qrcode.clear() // 清除二维码
      qrcode.makeCode(dt) // 生成另一个新的二维码
    },
    closeCode() {
      this.$refs.qrcode.innerHTML = ''
    }
  }
}
</script>

<style scoped>
div {
  display: inline-block;
  margin-right: 3px;
}
</style>
